<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" v-model="content">
    <h4 v-bind='title' v-model="content"></h4>
    <hr>
    <input type="text" v-model="title">
    <input type="text" v-model="title">
    <h4 v-bind="title">这里也会发生更新</h4>
</body>

</html>
<script>
    function View() {

        let proxy = new Proxy({}, {
            get(target, key) {

            },
            set(target, key, value) {
                // console.log(value);
                document.querySelectorAll(`[v-model="${key}"]`).forEach(item => {
                    item.value = value
                });
                document.querySelectorAll(`[v-bind="${key}"]`).forEach(item => {
                    item.innerHTML = value
                })
                document.querySelectorAll(`[v-model="content"]`).forEach(item => {
                    item.value = value 
                })
                document.querySelectorAll(`[v-model="${key}"]`).forEach(item => {
                    item.innerHTML = value
                })
            }
        });
        this.init = function () {
            const els = document.querySelectorAll("[v-model]");
            els.forEach(item => {
                item.addEventListener("keyup", function () {
                    proxy[this.getAttribute("v-model")] = this.value;
                    // console.log(this.getAttribute("v-model"))
                });
            });
        }

    }
    new View().init()
</script>